<script>
import { createProps } from '@/utils/CommonUtils'
import { Popconfirm } from 'ant-design-vue'

export default {
  name: 'HAction',
  props: {
    type: createProps(String, 'primary'),
    name: createProps(String),
    confirmTitle: createProps(String)
  },
  render (h) {
    if (this.$listeners.confirm) {
      return this.renderConfirm(h)
    }
    return this.renderLink(h)
  },
  methods: {
    renderLink (h) {
      return h('a', {
        class: ['h-action', `h-action-${this.type}`], href: '#',
        on: {
          click: e => this.onClick(e)
        }
      }, this.createActionBody(h))
    },
    renderConfirm (h) {
      return h(Popconfirm, {
        props: {
          okText: '确定', cancelText: '取消',
          title: this.confirmTitle
        },
        on: {
          confirm: () => this.$emit('confirm')
        }
      }, [this.renderLink(h)])
    },
    onClick (e) {
      e.stopPropagation()
      this.$emit('click')
    },
    createActionBody (h) {
      return this.name
    }
  }
}
</script>
<style>
.h-action {

}


.h-action-danger {
  color: #f56c6c !important;
}

.h-action-danger:hover {
  color: #f89898
}

.ant-dropdown-menu-item .h-action-danger {
  color: unset !important;
}

.ant-dropdown-menu-item .h-action-danger:hover {
  background: #fef0f0 ;
  color: #f56c6c !important;
}


.h-action-warning {
  color: #b88230 !important;
}

.h-action-warning:hover {
  color: #eebe77
}

.ant-dropdown-menu-item .h-action-warning {
  color: unset !important;
}

.ant-dropdown-menu-item .h-action-warning:hover {
  background: #fdf6ec ;
  color: #b88230 !important;
}

</style>